<template>
  <div class="flex items-center justify-between mb-6">
    <h2 class="text-xl font-semibold text-gray-900">{{ title }}</h2>
    <div class="flex items-center gap-4">
      <!-- <SearchBar 
        :placeholder="searchPlaceholder"
        @search="handleSearch"
      /> -->
      <button 
        v-if="showCreateButton"
        @click="$emit('create')"
        class="h-10 px-4 rounded-lg bg-[#635BFF] text-white hover:bg-[#5a4fcf] transition-colors flex items-center gap-2"
      >
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
        </svg>
        新增角色
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title: string
  searchPlaceholder?: string
  showCreateButton?: boolean
}>()

const emit = defineEmits<{
  'search': [keyword: string]
  'create': []
}>()

const handleSearch = (keyword: string) => {
  emit('search', keyword)
}
</script>
